<template>
    <div class="investment-map bg-light-blue-100 relative overflow-hidden flex justify-center items-center">
        <div class="flex flex-col w-full  mt-50px mb-150px">
            <!-- 顶部标题区域 -->
            <header class="flex items-center mx-[2%]">
                <div class="logo px-20px">
                    <img src="https://img.alicdn.com/imgextra/i2/O1CN01FF1t1g1Q3PDWpSm4b_!!6000000001920-55-tps-508-135.svg"
                        alt="上虞区logo" class="w-16 h-16" />
                </div>
                <div class="title-container ml-10px border-l-2 border-white pl-4">
                    <h1 class="text-gray-800 text-xl font-medium">上虞区</h1>
                    <h2 class="text-gray-700 text-[28px] font-bold">"4+N" 招商资源地图</h2>
                </div>
                <div class="flex-1"></div>
                <div class="watermark text-light-blue-300 italic text-[32px] font-bold">
                    杭州湾上虞经济技术开发区
                </div>
            </header>

            <!-- 中央标题栏 -->
            <div class="central-title relative mx-auto my-4 w-[90%] flex justify-center">
                <div class="title-bg relative w-full h-12 flex items-center justify-center">
                    <!-- 左侧装饰 -->
                    <img src="../assets/header-left.svg" class="w-[30%] h-50px" alt="" srcset="">

                    <!-- 中央标题 -->
                    <div class="relative w-[40%] h-full flex items-center justify-center">
                        <img src="../assets/header-center.svg" class="w-full h-full object-cover scale-120" alt=""
                            srcset="">
                        <div
                            class="absolute top-0 left-0 right-0 h-full flex items-center justify-center text-[30px] text-white font-bold">
                            <div class="flex justify-center items-center space-x-4">
                                <div class="">产业</div>
                                <div>平台</div>
                                <div>空间</div>
                            </div>
                        </div>
                    </div>
                    <!-- <template>
                        <slot name="title"></slot>
                    </template> -->

                    <!-- 右侧装饰 -->
                    <img src="../assets/header-right.svg" class="w-[30%] h-50px" alt="" srcset="">

                    <!-- 装饰线条 -->
                    <div class="absolute left-0 -bottom-1 w-full hidden">
                        <div class="h-1 w-full bg-light-blue-200 flex">
                            <div class="h-full w-1/12 bg-blue-400"></div>
                            <div class="h-full w-1/12 bg-blue-300"></div>
                            <div class="h-full flex-1"></div>
                            <div class="h-full w-1/12 bg-teal-300"></div>
                            <div class="h-full w-1/12 bg-teal-400"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主要内容区域 -->
            <div class="main-content flex px-4 py-2 mx-[5%] justify-center">
                <!-- 左侧信息面板 -->
                <div class="left-panel w-1/5 flex flex-col space-y-4">
                    <!-- 4个省级以上招商平台 -->
                    <div class="platform-panel">
                        <div
                            class="panel-header bg-blue-600 text-white p-2 rounded-lg relative flex items-center justify-center">
                            <div
                                class="absolute left-0 top-0 h-full bg-blue-500 skew-x-12 transform origin-left rounded-l-lg">
                            </div>
                            <div
                                class="absolute right-0 top-0 h-full bg-blue-500 -skew-x-12 transform origin-right rounded-r-lg">
                            </div>
                            <span class="z-10 font-bold">4个省级以上招商平台</span>
                        </div>
                        <div class="panel-content bg-blue-50 p-4 rounded-b-lg mb-20px">
                            <ul class="space-y-2 text-sm text-center my-30px">
                                <li>杭州湾上虞经济技术开发区</li>
                                <li>曹娥江经济技术开发区</li>
                                <li>曹娥江旅游度假区</li>
                                <li>e游小镇（未来城开发办）</li>
                            </ul>
                        </div>
                    </div>

                    <!-- N个乡镇特色产业园 -->
                    <div class="industry-panel">
                        <div
                            class="panel-header bg-blue-600 text-white p-2 rounded-lg relative flex items-center justify-center">
                            <div
                                class="absolute left-0 top-0 h-full bg-blue-500 skew-x-12 transform origin-left rounded-l-lg">
                            </div>
                            <div
                                class="absolute right-0 top-0 h-full bg-blue-500 -skew-x-12 transform origin-right rounded-r-lg">
                            </div>
                            <span class="z-10 font-bold">N个乡镇特色产业园</span>
                        </div>
                        <div class="panel-content bg-blue-50 p-4 rounded-b-lg mb-20px">
                            <div class="grid grid-cols-2 gap-2 text-xs text-center my-30px">
                                <div>百官街道</div>
                                <div>上浦镇</div>
                                <div>曹娥街道</div>
                                <div>崧厦街道</div>
                                <div>陈溪乡</div>
                                <div>汤浦镇</div>
                                <div>道墟街道</div>
                                <div>下管镇</div>
                                <div>丁宅乡</div>
                                <div>小越街道</div>
                                <div>东关街道</div>
                                <div>谢塘镇</div>
                                <div>丰惠镇</div>
                                <div>驿亭镇</div>
                                <div>盖北镇</div>
                                <div>永和镇</div>
                                <div>梁湖街道</div>
                                <div>章镇镇</div>
                                <div>岭南乡</div>
                                <div>长塘镇</div>
                            </div>
                        </div>
                    </div>

                    <!-- 地图图例 -->
                    <div
                        class="map-legend bottom-4 flex items-center space-x-6 text-sm whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                            <span>国家级平台</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-orange-500 mr-2"></div>
                            <span>省级平台</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-teal-500 mr-2"></div>
                            <span>乡镇特色产业园</span>
                        </div>
                    </div>
                </div>

                <!-- 中央地图区域 -->
                <div class="map-container w-[45%] relative flex justify-center items-center px-4">
                    <div class="map-image relative">
                        <!-- <img src="/map.png" alt="上虞区地图" class="w-full h-auto" /> -->

                        <!-- 地图上的点标记 - 实际应用中应该根据坐标动态生成 -->
                        <div class="absolute left-1/4 top-1/4 w-3 h-3 rounded-full bg-red-500"></div>
                        <div class="absolute left-1/3 top-1/2 w-3 h-3 rounded-full bg-orange-500"></div>
                        <div class="absolute left-1/2 top-1/3 w-3 h-3 rounded-full bg-teal-500"></div>
                        <!-- 更多点标记 -->
                    </div>
                </div>

                <!-- 右侧信息面板 -->
                <div class="right-panel w-[30%] relative">
                    <div class="panel-content bg-gray-50 rounded-lg p-4 border-t-4 border-red-500 relative py-150px">
                        <!-- 顶部装饰 -->
                        <div class="absolute top-0 left-0 right-0 h-1 flex">
                            <div class="h-full w-1/4 bg-red-500"></div>
                            <div class="h-full flex-1 bg-gradient-to-r from-red-500 to-orange-400"></div>
                        </div>

                        <!-- 标题 -->
                        <div class="title-bar bg-red-500 text-white text-center py-2 mb-6 font-bold">
                            杭州湾上虞经济技术开发区
                        </div>

                        <!-- 信息卡片 -->
                        <div class="info-cards grid grid-cols-2 gap-4">
                            <div class="info-card text-center">
                                <div
                                    class="icon-container mx-auto w-16 h-16 rounded-full bg-red-100 flex items-center justify-center border-2 border-red-300">
                                    <div class="icon text-red-500 text-2xl">🏢</div>
                                </div>
                                <div class="card-title border-b border-red-200 py-2 text-red-500 font-medium">平台</div>
                                <div class="card-content py-2">国家级经开区</div>
                            </div>

                            <div class="info-card text-center">
                                <div
                                    class="icon-container mx-auto w-16 h-16 rounded-full bg-red-100 flex items-center justify-center border-2 border-red-300">
                                    <div class="icon text-red-500 text-2xl">📈</div>
                                </div>
                                <div class="card-title border-b border-red-200 py-2 text-red-500 font-medium">招引能级</div>
                                <div class="card-content py-2">10亿元以上</div>
                            </div>

                            <div class="info-card text-center">
                                <div
                                    class="icon-container mx-auto w-16 h-16 rounded-full bg-red-100 flex items-center justify-center border-2 border-red-300">
                                    <div class="icon text-red-500 text-2xl">🏭</div>
                                </div>
                                <div class="card-title border-b border-red-200 py-2 text-red-500 font-medium">产业基础</div>
                                <div class="card-content py-2 text-sm">
                                    <div>先进材料（千亿）</div>
                                    <div>智能装备（百亿）</div>
                                </div>
                            </div>

                            <div class="info-card text-center">
                                <div
                                    class="icon-container mx-auto w-16 h-16 rounded-full bg-red-100 flex items-center justify-center border-2 border-red-300">
                                    <div class="icon text-red-500 text-2xl">🚀</div>
                                </div>
                                <div class="card-title border-b border-red-200 py-2 text-red-500 font-medium">特别培育发展
                                </div>
                                <div class="card-content py-2 text-sm">
                                    <div>空天经济</div>
                                    <div>具身智能等新兴产业</div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部装饰 -->
                        <div class="absolute bottom-0 left-0 right-0 h-1 flex">
                            <div class="h-full w-1/4 bg-red-500"></div>
                            <div class="h-full flex-1 bg-gradient-to-r from-red-500 to-orange-400"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部装饰波浪 -->
            <div class="bottom-waves absolute bottom-0 left-0 right-0 h-16 opacity-50">
                <div class="wave-1 absolute bottom-0 left-0 right-0 h-8 bg-light-blue-200 opacity-30"
                    style="clip-path: url(#wave1)"></div>
                <div class="wave-2 absolute bottom-0 left-0 right-0 h-12 bg-light-blue-300 opacity-20"
                    style="clip-path: url(#wave2)"></div>
            </div>

            <!-- SVG 定义波浪形状 -->
            <svg width="0" height="0" class="hidden">
                <defs>
                    <clipPath id="wave1">
                        <path d="M0,30 C150,10 350,40 500,20 C650,0 850,30 1000,10 L1000,100 L0,100 Z"></path>
                    </clipPath>
                    <clipPath id="wave2">
                        <path d="M0,10 C200,40 400,0 600,30 C800,60 1000,20 1200,50 L1200,100 L0,100 Z"></path>
                    </clipPath>
                </defs>
            </svg>
        </div>
    </div>
</template>

<script setup>
// 组件逻辑可以在这里添加
// 例如，可以添加地图点位数据、交互逻辑等
</script>

<style>
.investment-map {
    width: 100%;
    height: 100vh;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}



/* 可以添加更多自定义样式 */

/* CSS样式（兼容PostCSS） */
.inverted-trapezoid {
    position: relative;
    width: 300px;
    height: 150px;
    margin: 50px auto;
}

.inverted-trapezoid::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5%;
    width: 110%;
    height: 100%;
    transform: perspective(1em) rotateX(25deg);
    transform-origin: bottom;
    background: linear-gradient(45deg, #4CAF50, #2196F3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: -1;
}

/* 文字样式（根据你的关键词定制） */
.inverted-trapezoid {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 中央标题栏 */
.banner-wrapper {
    margin: 15px 60px;
    height: 60px;
}
</style>